<script setup lang="ts">

import Vue004Son from "./Vue004Son.vue";
import {reactive, ref} from "vue";

// 1. 父传子
// 单项数据流，父组件修改了可以传递给子，子组件修改不能传递给父
const money = ref(100)
const books = ref(["西游记","水浒传"])

// 传递对象(可以传递多个属性)
const data = reactive({
  money:100,
  books:["西游记","水浒传"]
})
</script>

<template>

  <div style="background-color: #f9f9f9">
    <h2>Father</h2>
<!--    <button @click="money+=10">充值</button>-->

    <button @click="data.money+=10">充值</button>

<!--  v-bind  让Son来接money属性-->
<!--    <Vue004Son v-bind:money="money"/>-->

<!--  传值简写  -->
<!--    <Vue004Son :money="money" :books="books"/>-->

<!--  或者  -->
<!--    <Vue004Son :money="data.money" :books="data.books"/>-->

<!--  简写绑定对象  -->
    <Vue004Son v-bind="data"/>
  </div>
</template>

<style scoped>

</style>